@charset "utf-8";

@mixin ListShadow{
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.col-left {
    float: left;
    width: 220px;
    position: relative;
    .nav {
        position: fixed;
        width: 220px;
        background-color: #fff;
        border-radius: 0 0 2px 2px;
        .nav-menu {
            position: relative;
            z-index: 0;
            float: left;
            width: 100%;
            margin: 20px 0;
            .menu {
                float: left;
                width: 156px;
                margin-left: 32px;
                overflow-x: hidden;
            }
            li {
                float: left;
                border-top: 1px solid #f8f8f8;
                &.focus{

                }
            }
            a {
                float: left;
                width: 156px;
                padding: 12px 0;
                color: #606566;
                font-size: 16px;
                line-height: 1;
                text-indent: 7px;
                text-decoration: none;
            }
        }
        .nav-label {
            position: absolute;
            top: 1px;
            left: -3px;
            z-index: -1;
            width: 223px;
            height: 41px;
            display: block;
            background-color: #f8f8f8;
            @include prefixer(transition,top 0.25s ease-out 0s);
            span {
                float: left;
                width: 3px;
                height: 100%;
                background-color: #ff5f3e;
            }
        }
    }
}

.col-right {
    float: right;
    width: 960px;
    position: relative;
    min-height: 200px;
    padding: 20px 0;
    background-color: $white;
    .history-pane{
        display: none;
        @include prefixer(transform,translateY(-100px));
        @include transition(transform 0.5s ease-in-out 0s,opacity 0.5s ease-in-out 0s);
        &.active{
            display: block;
            visibility: visible;
            opacity: 1;
            @include prefixer(transform,translateY(0));
        }
    }
}


/*history*/
.history-broadcast {
    position:relative;
    .middle-line{
        position: absolute;
        width: 4px;
        min-height: 100px;
        height: 100%;
        top: 0;
        left: 50%;
        margin-left: -2px;
        background-color: $white;
    }
}
.history-date {
    position:relative;
    text-align: center;
    h2 {
        font-size:25px;
        font-family:"Microsoft Yahei";
        font-weight:normal;
        border-radius: 6px;
        display: inline-block;
        margin-bottom: 50px;
        padding: 0 10px;
        position: relative;
        z-index: 2;
        background-color: $white;
        @include ListShadow;
        a {
            background: url(../img/icon08.gif) no-repeat right center;
            padding-right: 10px;
            color:#00bbff;
            display:inline-block;
            *display:inline;
            zoom:1;
            &:hover {
                text-decoration:none;
            }
            &.shrink{}
        }
        img {
            vertical-align:-5px;
        }
        &.date02 {
            background:none;
        }
    }
    i.time-icon{
        display: inline-block;
        float: left;
        width: 30px;
        height: 30px;
        overflow: hidden;
        background: url(../img/timesIcons.png) no-repeat;
        &.icon-future{
            background-position: -58px 0;
        }
        &.icon-fut{
            background-position: -7px -1px;
        }
        &.icon-now{
            background-position: -58px -40px;
        }
        &.icon-n{
            background-position: -7px -40px;
        }
        &.icon-history{
            background-position: -58px -82px;
        }
        &.icon-his{
            background-position: -7px -80px;
        }
    }
    ul{
        li {
            text-align: left;
            background-color: $white;
            border-radius: 12px;
            width: 553px;
            min-height: 200px;
            position: relative;
            margin-bottom: 100px;
            @include ListShadow;
            .br-label{
                background-color: #fff;
                border-radius: 50%;
                display: inline-block;
                height: 40px;
                position: absolute;
                right: -67px;
                top: 0;
                width: 40px;
                @include ListShadow;
                i{
                    margin: 5px;
                }
            }
            hgroup{
                padding: 20px 20px 10px;
                h3,strong,span,p,i{
                    font-weight: normal;
                }
                h3{
                    height: 30px;
                    line-height: 24px;
                    font-size: 18px;
                    span{
                        margin-left: 5px;
                    }
                }
                strong{
                    margin-right: 8px;
                }
                &>p{
                    line-height: 1.5;
                    vertical-align: top;
                }
                a{
                    font-size: 16px;
                    color: $normalColor;
                    text-decoration: none;
                    &:hover{
                        color: $themeColor;
                    }
                }
            }
            dl{
                color: $defaultColor;
                position: relative;
                margin: 0 20px;
                dt{
                    position: absolute;
                    width: 80px;
                    height: 80px;
                    left: 0;
                    top: 0;
                    border-radius: 6px;
                    overflow: hidden;
                    a{
                        display: block;
                        width: 100%;
                        height: auto;
                        border-radius: 6px;
                    }
                    img{
                        max-width: 80px;
                    }
                }
                dd{
                    margin-left: 90px;
                    font-size: 14px;
                    a{
                        color: $defaultColor;
                        &:hover{
                            color: $themeColor;
                        }
                    }
                }
            }
            &.br-future{
                h3{
                    color: #00b7ef;
                }
                hgroup{
                    strong{
                        color: #00b7ef;
                    }
                }
            }
            &.br-now{
                h3{
                    color: #eb7700;
                }
                hgroup{
                    strong{
                        color: #eb7700;
                    }
                }
            }
            &.br-history{
                h3{
                    color: #22ac38;
                }
                hgroup{
                    strong{
                        color: #22ac38;
                    }
                }
            }
            &:nth-child(odd){
                &:before{
                    border-bottom: 13px solid transparent;
                    border-left: 10px solid $grayColor;
                    border-top: 2px solid transparent;
                    content: "";
                    display: block;
                    height: 0;
                    position: absolute;
                    right: -10px;
                    top: 16px;
                    width: 0;
                }
                &:after{
                    border-bottom: 13px solid transparent;
                    border-left: 10px solid #ffffff;
                    border-top: 2px solid transparent;
                    content: "";
                    display: block;
                    height: 0;
                    position: absolute;
                    right: -10px;
                    top: 15px;
                    width: 0;
                }
            }
            &:nth-child(even),&.brEven{
                margin-top: -150px;
                float: right;
                .br-label{
                    right: auto;
                    left: -67px;
                }
                &:before{
                    border-bottom: 13px solid transparent;
                    border-right: 10px solid $grayColor;
                    border-top: 2px solid transparent;
                    content: "";
                    display: block;
                    height: 0;
                    position: absolute;
                    left: -10px;
                    top: 16px;
                    width: 0;
                }
                &:after{
                    border-bottom: 13px solid transparent;
                    border-right: 10px solid #ffffff;
                    border-top: 2px solid transparent;
                    content: "";
                    display: block;
                    height: 0;
                    position: absolute;
                    left: -10px;
                    top: 15px;
                    width: 0;
                }
            }
        }
    }
}
